<template>
  <div class="ai-evaluation">
    <h2 class="text-lg font-bold mb-2">AI 智能评估</h2>
    
    <div class="flex items-center mb-3">
      <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
        </svg>
      </div>
      <div>
        <h3 class="font-medium">{{ stockInfo.name }} ({{ stockInfo.symbol }})</h3>
        <div class="flex items-center">
          <span class="text-sm mr-2" :class="ratingColor">{{ aiRating }}</span>
          <div class="flex">
            <span v-for="i in 5" :key="i" class="text-xs">
              <svg xmlns="http://www.w3.org/2000/svg" 
                   :class="i <= ratingStars ? 'text-yellow-400' : 'text-gray-300'"
                   class="h-4 w-4 fill-current" 
                   viewBox="0 0 20 20" fill="currentColor">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="space-y-2">
      <div v-for="(metric, index) in aiMetrics" :key="index" class="flex items-center text-sm">
        <span class="w-24 text-gray-600">{{ metric.name }}</span>
        <div class="flex-grow mx-2">
          <div class="w-full bg-gray-200 rounded-full h-1.5">
            <div class="h-1.5 rounded-full" 
                 :class="metric.color"
                 :style="{ width: `${metric.value}%` }"></div>
          </div>
        </div>
        <span class="text-xs font-medium" :class="metric.textColor">{{ metric.value }}%</span>
      </div>
    </div>
    
    <div class="mt-3 pt-3 border-t border-gray-200">
      <p class="text-xs text-gray-600">{{ aiInsight }}</p>
    </div>
    
    <div class="mt-3 text-right">
      <button class="text-xs text-blue-600 hover:text-blue-800">
        查看完整AI分析 →
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const props = defineProps({
  stock: {
    type: String,
    required: true
  }
});

// 模拟数据 - 实际应用中应该从API获取
const stockInfo = ref({
  symbol: props.stock || '000001',
  name: '平安银行'
});

// 监听股票变化
watch(() => props.stock, (newStock) => {
  // 这里应该调用API获取新的股票AI评估数据
  stockInfo.value.symbol = newStock;
  // 模拟数据变化
  aiMetrics.value = generateRandomMetrics();
  aiInsight.value = generateInsight();
});

// AI评估指标
const aiMetrics = ref([
  { name: '技术面', value: 85, color: 'bg-green-600', textColor: 'text-green-600' },
  { name: '基本面', value: 72, color: 'bg-blue-600', textColor: 'text-blue-600' },
  { name: '市场情绪', value: 65, color: 'bg-yellow-600', textColor: 'text-yellow-600' },
  { name: '风险评估', value: 30, color: 'bg-red-600', textColor: 'text-red-600' }
]);

// 生成随机指标（模拟数据变化）
const generateRandomMetrics = () => {
  return [
    { name: '技术面', value: Math.floor(Math.random() * 30) + 70, color: 'bg-green-600', textColor: 'text-green-600' },
    { name: '基本面', value: Math.floor(Math.random() * 40) + 60, color: 'bg-blue-600', textColor: 'text-blue-600' },
    { name: '市场情绪', value: Math.floor(Math.random() * 50) + 50, color: 'bg-yellow-600', textColor: 'text-yellow-600' },
    { name: '风险评估', value: Math.floor(Math.random() * 40) + 20, color: 'bg-red-600', textColor: 'text-red-600' }
  ];
};

// AI评级和星级
const ratingValue = computed(() => {
  return aiMetrics.value.reduce((sum, metric) => sum + metric.value, 0) / aiMetrics.value.length;
});

const ratingStars = computed(() => {
  return Math.round(ratingValue.value / 20);
});

const aiRating = computed(() => {
  const rating = ratingValue.value;
  if (rating >= 80) return '强烈推荐';
  if (rating >= 70) return '建议买入';
  if (rating >= 60) return '中性偏多';
  if (rating >= 50) return '观望';
  if (rating >= 40) return '中性偏空';
  return '建议卖出';
});

const ratingColor = computed(() => {
  const rating = ratingValue.value;
  if (rating >= 70) return 'text-green-600';
  if (rating >= 50) return 'text-blue-600';
  if (rating >= 40) return 'text-yellow-600';
  return 'text-red-600';
});

// AI洞察
const aiInsight = ref('根据AI分析，该股票近期呈现出技术指标强势，基本面稳健，但市场情绪波动较大。建议关注量能变化，可适当建仓。');

const generateInsight = () => {
  const insights = [
    '根据AI分析，该股票近期呈现出技术指标强势，基本面稳健，但市场情绪波动较大。建议关注量能变化，可适当建仓。',
    '技术面分析显示该股处于上升通道，MACD金叉形成，但成交量不足以支撑继续上涨，建议观望为主。',
    'AI模型检测到该股基本面存在潜在风险，近期机构持仓减少，技术指标超买，建议减仓规避风险。',
    '综合多因素分析，该股短期有反弹机会，中期面临压力位阻碍，长期成长性良好，适合波段操作。'
  ];
  return insights[Math.floor(Math.random() * insights.length)];
};
</script>